<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>车辆选配-详情</title>
    <!-- 引入 Element UI 的样式 -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> -->
    <link rel="stylesheet" href="../../assets/css/styles.css" />
    <link rel="stylesheet" href="../../assets/css/element-ui.css" />
  </head>
  <body>
    <div id="app" style="margin:20px">
      <el-card class="vehicle-info-card">
        <div class="main-category-title">车辆基本信息</div>
        <div class="info-item">
          <span>车型号：</span>
          <span>{{orderInfo.carModelName}}</span>
        </div>
        <div class="info-item">
          <span>车平台：</span>
          <span>{{orderInfo.carPlatformName}}</span>
        </div>
      </el-card>
      <div v-for="configItem in configOptions" :key="bigConfigCode" style="margin-bottom: 10px">
        <div class="main-category-title" style="margin-left: 20px">{{configItem.bigConfigName}}</div>
        <el-table :data="configItem.smallConfigList" stripe border>
          <el-table-column prop="smallConfigName" label="选配项目"></el-table-column>
          <el-table-column label="选配内容">
            <template #default="{ row }">
              <div v-if="row.configType === '1'">
                <el-radio-group v-model="row.selectedValue">
                  <el-radio v-for="(option, index) in row.optionList" :key="index" :label="option.optionCode">{{ option.optionName }}</el-radio>
                </el-radio-group>
              </div>
              <div v-if="row.configType === '2'">
                <el-checkbox-group v-model="row.selectedValues">
                  <el-checkbox v-for="(option, index) in row.optionList" :key="index" :label="option.optionCode">{{ option.optionName }}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div v-if="row.configType === '0'">
                <span>{{row.configText}}</span>
                <!--<el-input type="textarea" v-model="row.configText" rows="3" readOnly></el-input>-->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="button-container">
        <el-button type="primary" @click="submitSelection">提交选配</el-button>
      </div>
    </div>
    <script src="../../assets/js/constant.js"></script>
    <script src="../../assets/js/utils.js"></script>
    <script src="../../assets/js/auth.js"></script>
    <script src="../../assets/js/axios.min.js"></script>
    <!-- 引入 Vue.js -->
    <script src="../../assets/js/vue.js"></script>
    <!-- 引入 Element UI 的 JS 文件 -->
    <script src="../../assets/js/element-ui.js"></script>

    <script>
      new Vue({
        el: '#app',
        components: {},
        data() {
         return {
           tableData: [],
           orderInfo: {},
           cdoCode: '',
           request_host: request_host,
           configOptions: [
             {
               bigConfigCode: '',
               bigConfigName: '',
               smallConfigList: [],
             },
           ]

          }
        },
        created() {
          this.init()
        },
        methods: {
          init() {
            this.cdoCode = getUrlParameter('cdoCode')
            this.getInfo()
          },
          async getInfo(){
            try {
              await axios.get(`${this.request_host}/system/do/getDoInfo?cdoCode=`+this.cdoCode).then((response) => {
                if (response.status === 200) {
                  this.orderInfo = response.data.data
                  axios.get(`${this.request_host}/system/optionsConfig/getConfigByCarModelCode?carModelCode=`+this.orderInfo.carModelCode).then((response) => {
                    if (response.status === 200) {
                      this.configOptions = response.data.data
                      console.log(this.configOptions)
                    }
                  })
                  console.log(this.orderInfo.carModelCode)
                }
              })
            } catch (error) {
              console.error('请求失败:', error)
            }
          },
          submitSelection() {
            // 这里添加下单逻辑
            console.log(this.configOptions)
            let orderInfo = {
              cdoCode: this.cdoCode,
              carModelCode: this.orderInfo.carModelCode,
              bigConfigList: this.configOptions,
            }
            axios.post(`${this.request_host}/system/do/saveOrderOption`, orderInfo)
                    .then(response => {
                      if (response.data.code === 200){
                        this.$message.success("提交成功")
                        const params = `cdoCode=`+response.data.data.cdoCode;
                        const url = `../dealerOrder/dealer_order_item.html?${params}`;
                        window.open(url, '_blank');
                      }else {
                        this.$message.error(response.data.msg)
                      }

                    })
          }
        }
      })
    </script>
    <style>
      .vehicle-info-card {
        margin-bottom: 20px;
      }

      .info-item {
        margin-bottom: 10px;
      }
      .button-container {
        display: flex;
        justify-content: center;
        margin: 20px 0;
      }
      .main-category-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #2c3e50;
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
      }
    </style>
  </body>
</html>
